{#<!DOCTYPE html>#}
{% extends 'base.html' %}
{% load static %}
{% block title %}患者{% endblock %}

{% block body-context %}
<style type="text/css">
.widget-timeline-icon2 li {
    padding-bottom: 73px;
}

</style>
    <body> <!--data-spy="scroll"  data-offset="40" data-target="#myScrollspy" -->

    <div class="container-fluid">
        <div class="row">
            <!-- 左边栏信息 -->
            <div id="myScrollspy" class="col-sm-3"> <!-- class="col-sm-3" -->
{#                <div class="container-fluid">#}
                    <div class="container-fluid">
                        <ul class="nav nav-pills nav-stacked">
                            <div>  <!--style="display: fixed"  class="col-xl-3 col-xxl-4 col-md-6"-->
                                <br/><br/>
                                <div class="card">
                                    <div class="card-header border-0 pb-0">
                                        <a type="button" href="{% url 'patient-user' %}" class="btn tp-btn btn-primary fs-20 font-w600">我的主页
                                        </a>
                                    </div>
                                    <div class="card-body">
                                        <div class="widget-timeline-icon2">
                                            <ul class="timeline">
                                                <li>
                                                    <div class="icon bg-primary"><i class="las la-stethoscope"></i>
                                                    </div>
                                                    <a class="timeline-panel text-muted" href="#register">
                                                        <h4 class="mb-2 mt-1">预约&挂号</h4>
                                                        <p class="fs-15 mb-0 ">z</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <div class="icon bg-primary"><i class="las la-stethoscope"></i>
                                                    </div>
                                                    <a class="timeline-panel text-muted" href="#navigation">
                                                        <h4 class="mb-2 mt-1">院内导航</h4>
                                                        <p class="fs-15 mb-0 ">Sat,</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <div class="icon bg-primary las"><i class="las la-stethoscope"></i>
                                                    </div>
                                                    <a class="timeline-panel text-muted" href="#instruction">
                                                        <h4 class="mb-2 mt-1">就医须知</h4>
                                                        <p class="fs-15 mb-0 ">Sat, </p>
                                                    </a>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ul>
                    </div>
{#                </div>#}
            </div>

            <!-- 右边滚动栏信息，包括以下几部分 -->
            <div class="col-sm-8">

                <!-- 点击页面信息（初步想法是通过它可以进行页面间的跳转，以此保证每个患者自己有自己的主页） -->
                <div class="page-titles">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item active"><a href="javascript:void(0)">首页</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0)">登录</a></li>
                    </ol>
                </div>

                <!--这里添加一个医院介绍的信息-->
                <div class="col-lg-12">
                    <div class="card mb-3">
                        {#                        <img src="{% static 'images/patient/home.png' %}" class="card-img-top" alt="...">#}
                        <div class="card-body p-4">
                            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">
                                    </li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
                                </ol>
                                <div class="carousel-inner" style="height: 250px;">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="{% static 'images/patient/home3.jpg' %}"
                                             alt="First slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="{% static 'images/patient/home4.jpg' %}"
                                             alt="Second slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="{% static 'images/patient/home5.jpg' %}"
                                             alt="Third slide">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleIndicators"
                                   data-slide="prev"><span
                                        class="carousel-control-prev-icon"></span> <span
                                        class="sr-only">Previous</span> </a><a class="carousel-control-next"
                                                                               href="#carouselExampleIndicators"
                                                                               data-slide="next"><span
                                    class="carousel-control-next-icon"></span>
                                <span class="sr-only">Next</span></a>
                            </div>
                            <br>
                            <h5 class="card-title">医院简介</h5>
                            <p class="card-text">***医院，
                                是集医疗、教学、科研、预防、保健、康复为一体的现代综合性二级甲等医院，
                                技术力量雄厚，拥有众多知名的医学专家和大批中青年优秀人才，担负着全区和邻近市县人口的疾病防治任务，
                                以及山西医科大学晋祠学院、新乡医学院三全学院等多所大中专医学院校学生的临床教学工作，
                                是医保、工伤、新型农村合作医疗的定点单位。</p>
                            <p class="card-text"><small class="text-muted">成立于1948年12月</small></p>
                        </div>
                    </div>

                </div>

                <!--这里是医院对外的通知，尤其是相关的紧急通知之类的，比如疫情期间就可以发布一些防疫政策通知-->
                <div class="col-lg-12">
                    <div class="card patient-detail">
                        <div class="card-header border-0 pb-0">
                            <h4 class="fs-20 font-w600 text-white">Note for Patient</h4>
                        </div>
                        <div class="card-body fs-14 font-w300">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                            mollit anim id est laborum
                        </div>
                    </div>
                </div>

                <!--预约挂号（包括各种部门的挂号，这个需要选择）-->
                <div class="col-lg-12" id="register">
                    <div class="card">
                        <div class="card-body">
                            <div class="profile-tab">
                                <div class="custom-tab-1">
                                    <ul class="nav nav-tabs">
                                        <li class="nav-item"><a href="#my-posts" data-toggle="tab"
                                                                class="nav-link active show">科室</a>
                                        </li>
                                        <li class="nav-item"><a href="#about-me" data-toggle="tab"
                                                                class="nav-link">时间</a>
                                        </li>
                                        <li class="nav-item"><a href="#profile-settings" data-toggle="tab"
                                                                class="nav-link">医生</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div id="my-posts" class="tab-pane fade active show">
                                            <div class="my-post-content pt-3">
                                                <div class="post-input">
                                                    <textarea name="textarea" id="textarea" cols="30" rows="5"
                                                              class="form-control bg-transparent"
                                                              placeholder="Please type what you want...."></textarea>
                                                    <a href="javascript:void()" class="btn btn-primary light px-3"><i
                                                            class="fa fa-link"></i> </a>
                                                    <a href="javascript:void()" class="btn btn-primary light mr-1 px-3"><i
                                                            class="fa fa-camera"></i> </a><a href="javascript:void()"
                                                                                             class="btn btn-primary">Post</a>
                                                </div>
                                                <div class="profile-uoloaded-post border-bottom-1 pb-5">
                                                    <img src="images/profile/8.jpg" alt="" class="img-fluid">
                                                    <a class="post-title" href="javascript:void()">
                                                        <h4>Collection of textile samples lay spread</h4>
                                                    </a>
                                                    <p>A wonderful serenity has take possession of my entire soul like
                                                        these sweet morning of spare which enjoy whole heart.A wonderful
                                                        serenity has take possession of my entire soul like these sweet
                                                        morning
                                                        of spare which enjoy whole heart.</p>
                                                    <button class="btn btn-primary mr-2"><span class="mr-2"><i
                                                            class="fa fa-heart"></i></span>Like
                                                    </button>
                                                    <button class="btn btn-secondary"><span class="mr-2"><i
                                                            class="fa fa-reply"></i></span>Reply
                                                    </button>
                                                </div>
                                                <div class="profile-uoloaded-post border-bottom-1 pb-5">
                                                    <img src="images/profile/9.jpg" alt="" class="img-fluid">
                                                    <a class="post-title" href="javascript:void()">
                                                        <h4>Collection of textile samples lay spread</h4>
                                                    </a>
                                                    <p>A wonderful serenity has take possession of my entire soul like
                                                        these sweet morning of spare which enjoy whole heart.A wonderful
                                                        serenity has take possession of my entire soul like these sweet
                                                        morning
                                                        of spare which enjoy whole heart.</p>
                                                    <button class="btn btn-primary mr-2"><span class="mr-2"><i
                                                            class="fa fa-heart"></i></span>Like
                                                    </button>
                                                    <button class="btn btn-secondary"><span class="mr-2"><i
                                                            class="fa fa-reply"></i></span>Reply
                                                    </button>
                                                </div>
                                                <div class="profile-uoloaded-post pb-5">
                                                    <img src="images/profile/8.jpg" alt="" class="img-fluid">
                                                    <a class="post-title" href="javascript:void()">
                                                        <h4>Collection of textile samples lay spread</h4>
                                                    </a>
                                                    <p>A wonderful serenity has take possession of my entire soul like
                                                        these sweet morning of spare which enjoy whole heart.A wonderful
                                                        serenity has take possession of my entire soul like these sweet
                                                        morning
                                                        of spare which enjoy whole heart.</p>
                                                    <button class="btn btn-primary mr-2"><span class="mr-2"><i
                                                            class="fa fa-heart"></i></span>Like
                                                    </button>
                                                    <button class="btn btn-secondary"><span class="mr-2"><i
                                                            class="fa fa-reply"></i></span>Reply
                                                    </button>
                                                </div>
                                                <div class="text-center mb-2"><a href="javascript:void()"
                                                                                 class="btn btn-primary">Load More</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="about-me" class="tab-pane fade">
                                            <div class="profile-about-me">
                                                <div class="pt-4 border-bottom-1 pb-3">
                                                    <h4 class="text-primary">About Me</h4>
                                                    <p class="mb-2">A wonderful serenity has taken possession of my
                                                        entire soul, like these sweet mornings of spring which I enjoy
                                                        with my whole heart. I am alone, and feel the charm of existence
                                                        was created for the bliss of souls like mine.I am so happy, my
                                                        dear friend, so absorbed in the exquisite sense of mere tranquil
                                                        existence, that I neglect my talents.</p>
                                                    <p>A collection of textile samples lay spread out on the table -
                                                        Samsa was a travelling salesman - and above it there hung a
                                                        picture that he had recently cut out of an illustrated magazine
                                                        and housed in a nice, gilded frame.</p>
                                                </div>
                                            </div>
                                            <div class="profile-skills mb-5">
                                                <h4 class="text-primary mb-2">Skills</h4>
                                                <a href="javascript:void()" class="btn btn-primary light btn-xs mb-1">Admin</a>
                                                <a href="javascript:void()" class="btn btn-primary light btn-xs mb-1">Dashboard</a>
                                                <a href="javascript:void()" class="btn btn-primary light btn-xs mb-1">Photoshop</a>
                                                <a href="javascript:void()" class="btn btn-primary light btn-xs mb-1">Bootstrap</a>
                                                <a href="javascript:void()" class="btn btn-primary light btn-xs mb-1">Responsive</a>
                                                <a href="javascript:void()" class="btn btn-primary light btn-xs mb-1">Crypto</a>
                                            </div>
                                            <div class="profile-lang  mb-5">
                                                <h4 class="text-primary mb-2">Language</h4>
                                                <a href="javascript:void()" class="text-muted pr-3 f-s-16"><i
                                                        class="flag-icon flag-icon-us"></i> English</a>
                                                <a href="javascript:void()" class="text-muted pr-3 f-s-16"><i
                                                        class="flag-icon flag-icon-fr"></i> French</a>
                                                <a href="javascript:void()" class="text-muted pr-3 f-s-16"><i
                                                        class="flag-icon flag-icon-bd"></i> Bangla</a>
                                            </div>
                                            <div class="profile-personal-info">
                                                <h4 class="text-primary mb-4">Personal Information</h4>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Name <span class="pull-right">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-9"><span>Mitchell C.Shay</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Email <span class="pull-right">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-9"><span>example@examplel.com</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Availability <span
                                                                class="pull-right">:</span></h5>
                                                    </div>
                                                    <div class="col-9"><span>Full Time (Free Lancer)</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Age <span class="pull-right">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-9"><span>27</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Location <span class="pull-right">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-9"><span>Rosemont Avenue Melbourne,
                                                                Florida</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Year Experience <span
                                                                class="pull-right">:</span></h5>
                                                    </div>
                                                    <div class="col-9"><span>07 Year Experiences</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="profile-settings" class="tab-pane fade">
                                            <div class="pt-3">
                                                <div class="settings-form">
                                                    <h4 class="text-primary">Account Setting</h4>
                                                    <form>
                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label>Email</label>
                                                                <input type="email" placeholder="Email"
                                                                       class="form-control">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>Password</label>
                                                                <input type="password" placeholder="Password"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Address</label>
                                                            <input type="text" placeholder="1234 Main St"
                                                                   class="form-control">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Address 2</label>
                                                            <input type="text" placeholder="Apartment, studio, or floor"
                                                                   class="form-control">
                                                        </div>
                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label>City</label>
                                                                <input type="text" class="form-control">
                                                            </div>
                                                            <div class="form-group col-md-4">
                                                                <label>State</label>
                                                                <select class="form-control" id="inputState">
                                                                    <option selected="">Choose...</option>
                                                                    <option>Option 1</option>
                                                                    <option>Option 2</option>
                                                                    <option>Option 3</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-md-2">
                                                                <label>Zip</label>
                                                                <input type="text" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input"
                                                                       id="gridCheck">
                                                                <label class="custom-control-label" for="gridCheck">
                                                                    Check me out</label>
                                                            </div>
                                                        </div>
                                                        <button class="btn btn-primary" type="submit">Sign
                                                            in
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--院内导航（这里不关联线上地图，仅仅是关于院内部门的说明，最多配图，关联地图有待开发）-->
                <div class="col-lg-12" id="navigation">
                    <div class="card">
                        <div class="card-body">
                            <div class="profile-tab">
                                <div class="custom-tab-1">
                                    <ul class="nav nav-tabs">
                                        <li class="nav-item"><a href="#outpatient" data-toggle="tab"
                                                                class="nav-link active show">门诊楼</a>
                                        </li>
                                        <li class="nav-item"><a href="#in_hospital" data-toggle="tab" class="nav-link">住院楼</a>
                                        </li>
                                        <li class="nav-item"><a href="#check" data-toggle="tab"
                                                                class="nav-link">检查楼</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div id="outpatient" class="tab-pane fade active show">
                                            <div class="profile-outpatient">
                                                <div class="counter">
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>层</th>
                                                            <th>科室</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td>-2F</td>
                                                            <td>地下停车场</td>
                                                        </tr>
                                                        <tr>
                                                            <td>-1F</td>
                                                            <td>病案室、消毒供应室、地下停车场</td>
                                                        </tr>
                                                        <tr>
                                                            <td>-1F</td>
                                                            <td>病案室、消毒供应室、地下停车场</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F1</td>
                                                            <td>
                                                                总服务台、挂号收费、药房、血透室、门急诊化验、采血室、急诊、儿科门急诊、门急诊影像（CT室、DR室）、老年病科门诊、留观室、儿童点观室、投诉接待室、住院楼大厅、体检接待站、入出院服务站、医保办
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>F2</td>
                                                            <td>
                                                                挂号收费、内科专科专家门诊、妇科门诊、产科门诊、内分泌诊疗区、营养科、影像科（CT室、放射室）、介入科（介入手术室）、综合外科/创伤骨科
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>F3</td>
                                                            <td>
                                                                挂号收费、检验科、内窥镜室、理疗室、电生理室（心电图、脑电图）、超声诊断科（B超室）、外科专科专家门诊、耳鼻咽喉科门诊、皮肤科门诊、整形（美容）外科门诊、综合会诊室、肿瘤科门诊、戒烟门诊、门诊部办公室
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>F4</td>
                                                            <td>麻醉科、手术室、康复医学科治疗室、中医门诊、病理科、输血科</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F5</td>
                                                            <td>
                                                                重症医学科（ICU）、重症医学科2区（神经外科组）、心理咨询室、泌尿外科门诊、口腔科门诊、护理门诊、麻醉门诊、萍乡市司法鉴定中心
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="in_hospital" class="tab-pane fade">
                                            <div class="profile-in_hospital">
                                                <div class="counter">
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>层</th>
                                                            <th>科室</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td>F6</td>
                                                            <td>儿科小儿呼吸科、小儿消化科、新生儿科、儿科ICU</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F7</td>
                                                            <td>肿瘤科一病区、肿瘤科二病区</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F8</td>
                                                            <td>妇科、胃肠外科、肛肠外科</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F9</td>
                                                            <td>肝胆外科、小儿外科、血管介入外科</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F10</td>
                                                            <td>消化内科一病区、风湿免疫科、疼痛科消化内科二病区、肝病专科</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F11</td>
                                                            <td>泌尿外科、胸外科、心脏大血管外科</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F12</td>
                                                            <td>肾病科、血液科、口腔颌面外科、小儿颌面外科</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F13</td>
                                                            <td>神经外科、耳鼻咽喉科、小儿耳鼻咽喉科</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="check" class="tab-pane fade">
                                            <div class="profile-check">
                                                <div class="counter">
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>层</th>
                                                            <th>科室</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td>F1</td>
                                                            <td>放疗室、放疗日间病房</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F2</td>
                                                            <td>药物临床试验机构</td>
                                                        </tr>
                                                        <tr>
                                                            <td>F3</td>
                                                            <td>核磁共振室</td>
                                                        </tr>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--就医须知（分类，包括就诊和住院的声明）-->
                <div class="col-lg-12" id="instruction">
                    <div class="card">
                        <div class="card-body">
                            <div class="profile-tab">
                                <div class="custom-tab-1">
                                    <ul class="nav nav-tabs">
                                        <li class="nav-item"><a href="#see-a-doctor" data-toggle="tab"
                                                                class="nav-link active show">就诊声明</a>
                                        </li>
                                        <li class="nav-item"><a href="#in-hospital" data-toggle="tab" class="nav-link">住院须知</a>
                                        </li>

                                    </ul>
                                    <div class="tab-content">
                                        <div id="see-a-doctor" class="tab-pane fade active show">
                                            <div class="profile-see-a-doctor">
                                                <div class="pt-4 border-bottom-1 pb-3">
                                                    <h4 class="text-primary">就诊声明</h4>
                                                    <p class="mb-2">A wonderful serenity has taken possession of my
                                                        entire soul, like these sweet mornings of spring which I enjoy
                                                        with my whole heart. I am alone, and feel the charm of existence
                                                        was created for the bliss of souls like mine.I am so happy, my
                                                        dear friend, so absorbed in the exquisite sense of mere tranquil
                                                        existence, that I neglect my talents.</p>
                                                    <p>A collection of textile samples lay spread out on the table -
                                                        Samsa was a travelling salesman - and above it there hung a
                                                        picture that he had recently cut out of an illustrated magazine
                                                        and housed in a nice, gilded frame.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="in-hospital" class="tab-pane fade">
                                            <div class="profile-in-hospital">
                                                <div class="pt-4 border-bottom-1 pb-3">
                                                    <h4 class="text-primary">住院须知</h4>
                                                    <p class="mb-2">A wonderful serenity has taken possession of my
                                                        entire soul, like these sweet mornings of spring which I enjoy
                                                        with my whole heart. I am alone, and feel the charm of existence
                                                        was created for the bliss of souls like mine.I am so happy, my
                                                        dear friend, so absorbed in the exquisite sense of mere tranquil
                                                        existence, that I neglect my talents.</p>
                                                    <p>A collection of textile samples lay spread out on the table -
                                                        Samsa was a travelling salesman - and above it there hung a
                                                        picture that he had recently cut out of an illustrated magazine
                                                        and housed in a nice, gilded frame.</p>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    </body>

{% endblock %}
